<script setup lang="ts">
defineProps({
  title: String,
  titleColor: {
    type: String,
    default: '#000'
  },
  conColor: {
    type: String,
    default: '#999'
  },
  conSize: {
    type: String,
    default: '28rpx'
  }
})
</script>

<template>
  <view class="desc-item" :style="{ '--titleColor': titleColor, '--conColor': conColor, '--conSize': conSize }">
    <view class="desc-item-title">
      {{ title }}
    </view>
    <view class="desc-item-content">
      <slot></slot>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.desc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20rpx;

  .desc-item-title {
    color: var(--titleColor);
  }

  .desc-item-content {
    color: var(--conColor);
    font-size: var(--conSize);
  }
}
</style>
